<template>
  <div class="m_right">
    <div class="mem_tit">收藏列表</div>
        <el-table
            :data="collects"
            style="width: 100%"
            >
            <el-table-column
                type="index"
                label="序号"
                width="100">
            </el-table-column>
            <el-table-column
                prop="name"
                label="商品名称"
                :show-overflow-tooltip="true"
                width="180">
            </el-table-column>
            <el-table-column
                prop="description"
                label="商品描述"
                :show-overflow-tooltip="true"
                width="180">
            </el-table-column>
            <el-table-column
                prop="price"
                label="商品价格"
                :show-overflow-tooltip="true"
                width="120">
            </el-table-column>
            <el-table-column
                prop="fileName"
                label="图片"
                width="180">
                     <!-- 图片的显示 -->
                
                 <template    slot-scope="scope" >            
                    <img v-if="scope.row.fileName!=''" :src="fileBaseUrl+scope.row.fileName"  min-width="70" height="70" />
                 </template>      
            </el-table-column>
            <el-table-column
                prop="creationDate"
                label="创建时间">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope" >
                    <el-button @click="removeCollect(scope.row.id)" type="text" size="small">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>

<script>
export default {
    name:'BackCollects',
    data:function(){
        return{
            fileBaseUrl:'http://192.168.79.98:9001/',
        }
    },
    computed:{
        collects(){
            return this.$store.state.collects;
        }
    },
    methods:{
        removeCollect(productId){
            this.$confirm('是否移除收藏的商品?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }).then(() => {
                //发送请求删除收藏的商品
                this.$axios({
                url:'/easybuy/collect/remove',
                params:{
                    productId
                }
                }).then(rs=>{
                    console.log(rs);
                    if(rs.data.code == 200){
                        this.getCollects();
                        this.$message.success("删除成功！");
                    }else{
                        this.$message.error("删除失败！");
                    }
                })
            }).catch(() => {
                this.$message.info("已取消删除");
            });
            
        },
        //获取收藏夹中的所有商品
        getCollects(){
            this.$axios({
                url:'/easybuy/collect/all',
            }).then(rs=>{
                //将收藏夹中的商品信息存到vuex中
                console.log("collectList:",rs.data.collectList);
                this.$store.commit('changeCollects',rs.data.collectList);
                window.sessionStorage.setItem('collects',JSON.stringify(rs.data.collectList));
            })
        },
    },
}
</script>

<style>

</style>